<template>
    <div class="A">
        <div class="a">
            <h1>
                物易近~方便您的生活
            </h1>
        </div>
        <div class="b">
            <div class="p">
                <span>
                    产品介绍
                </span>
            </div>
            <div class="o">
                <span>为了方便您的种种跑腿需求<br>
                    在这里<br>当您抽不开空买东西的时候
                    <br>当您身旁有物品没时间传递的时候
                    <br>当您没有办法取快递的时候<br>
                    都可以用到我们物易近<br>
                    物易近。用了的都说好
                </span>
            </div>
            <div class="i">
                <div class="q" @click="yes()">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaolian"></use>
                      </svg>
                      <div class="l">
                        <h1>确定进入</h1>
                        <h3>已经迫不及待想要使用啦！</h3>
                      </div>
                </div>
                <div class="w" @click="no()">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-a-sikaoyihuo-02"></use>
                      </svg>
                      <div class="l">
                        <h1>取消进入</h1>
                        <h3>嗯~我还要再想一想呢！</h3>
                      </div>
                </div>
                <div class="e" @click="message()">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-liuyan"></use>
                          </svg>
                          <div class="l">
                            <h1>留言板</h1>
                            <h3>物易近，让我来和你沟通沟通！</h3>
                          </div>
                </div>
                
            </div>
        </div>
    </div>
</template>

<script>
    export default {
            methods: {
                yes(){
                    this.$router.push({name:"lssueorder"})
                },
                no(){
                    this.$router.push({name:"login"})
                },
                message(){
                    this.$router.push({name:"umessage"})
                }
            },
    }
</script>
<style lang="scss" scoped>


.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
  

.A{
    background-color: #fff;
    .a{
        background-color: rgba(0,0,0,.1);
        width: 100%;
        height: 70px;
        text-align: center;
        h1{
            font-size: 30px;
            padding-top:10px;
        }
    }
    .b{
        margin-top: 10px;
        background:url("../assets/img/usersf.gif");
        background-size:100% 100%;
        height:400px;
        .p{
            width: 300px;
            text-align: center;
            font-size: 32px;
            border: 1px solid #000;
            border-radius: 100px 100px;
            position: absolute;
            margin-top: 80px;
            margin-left: 700px;
        }
        .o{
            padding-top: 170px;
            text-align: center;
            span{
                font-size: 20px;
            }
        }
        .i{
            margin-top: 80px;
            width: 100%;
            display: flex;
            .q{
                background-color: rgba(171,129,151,.8);
                margin-left: 100px;
                width: 25%;
                display: flex;
                height: 200px;
                svg{
                    font-size: 100px;
                    color: rgb(255, 238, 0);
                    margin-top: 50px;
                    margin-left: 15px;
                }
                h1{
                    margin-left: 45px;
                    margin-top: 50px;
                }
                h3{
                    margin-left: 20px;
                    margin-top: 20px;
                }
            }
            .w{
                background-color: rgba(108,76,141,.8);
                margin-left: 80px;
                width: 25%;
                display: flex;
                height: 200px;
                svg{
                    font-size: 100px;
                    margin-top: 50px;
                    margin-left: 25px;
                }
                h1{
                    margin-left: 45px;
                    margin-top: 50px;
                }
                h3{
                    margin-left: 20px;
                    margin-top: 20px;
                }
            }

            .e{
                background-color: rgba(197,173,187,.8);
                margin-left: 80px;
                width: 25%;
                display: flex;
                height: 200px;
                svg{
                    color: rgb(255, 255, 255);
                    font-size: 100px;
                    margin-top: 50px;
                    margin-left: 25px;
                }
                h1{
                    margin-left: 88px;
                    margin-top: 50px;
                }
                h3{
                    margin-left: 20px;
                    margin-top: 20px;
                }
            }
        }

    }
}
</style>